<template>
	<view class="context">
		<view class="box">
			<view class="box-item">
				<view class="box-left">
					<u-avatar></u-avatar>
				</view>
				<view class="box-right">
					<view class="box-item-title">
						<view class="item-title-cotent">最新通知</view>
						<view class="item-title-time">2021.04.13</view>
					</view>
					<view class="box-item-content">
						亲爱的社区成员： 因IPFS满存算力封装成本上升，自1月20号起，满存算力
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadNoticeList"]),
  },
  computed: {
    ...mapGetters("mf/my", ["noticeList"]),
  },
  async onLoad() {
    await this.loadNoticeList();
  },
};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.context {
		.box {}
	}

	.box-item {
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		align-items: flex-start;

		.box-left {
			margin-right: 20rpx;
		}

		.box-right {
			.box-item-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.box-item-content {
				margin-top: 10rpx;
				color: #222;
				font-size: 24rpx;
			}
		}
	}

	.box-item-title {
		.item-title-cotent {
			color: #222;
			font-size: 28rpx;
			font-weight: bold;
		}

		.item-title-time {
			font-size: 24rpx;
			color: #999;
		}
	}
</style>